<template>
  <div class="clas_All">
    <el-row>
      <el-col>
        <el-form :model="params" size="small" :inline="true">
          <el-form-item prop="menuName">
            <el-date-picker
              v-model="params.paramTime"
              type="date"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-button @click="getTop">查询</el-button>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <!-- <el-col :span="4">
        <div class="head-container">
          <el-tree
            :data="deptOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            node-key="id"
            default-expand-all
            highlight-current
            @node-click="handleNodeClick"
          />
        </div>
      </el-col> -->
      <el-col :span="24">
        <el-row>
          <el-col>
            <div ref="aa" id="cbfx_1" style="width: 100%; height: 350px"></div>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <div ref="super_tow" style="width: 100%; height: 350px"></div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  getProductPositive,
  getProductPositiveProfit,
} from "@/api/system/cost.js";
import { getPanDianCode, FindShopBom } from "@/api/system/stock";
import * as echarts from "echarts";
export default {
  data() {
    return {
      params: {
        foodCategoryCode: "",
        paramTime: "2024-03-01",
        shopId: "",
      },
      AllotList: {},
      deptOptions: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      tProduct: [],
      xAxistProduct: [],
      ProductPositive: [],
      xAxisProduct: [],
      Xmax: 0,
      Ymax: 0,
    };
  },
  created() {},
  mounted() {
    this.getTop();
    // FindShopBom().then((res) => {
    //   if (res.code == 200) {
    //     this.deptOptions = res.data;
    //   }
    // });
  },
  methods: {
    getTop() {
      // this.AllotList.createTime
      // 销售TOP10
      getProductPositive(this.params).then((res) => {
        if (res.code == 200) {
          this.tProduct = [];
          this.xAxistProduct = [];
          let max = 0;
          res.data.forEach((item) => {
            // if (max < item.sumAmount) {
            //   max = item.sumAmount;
            // }
            this.tProduct.push(item.foodCount);
            this.xAxistProduct.push(item.foodName);
          });
          this.makeBarCharts();
        }
      });
      // 毛利TOP10
      getProductPositiveProfit(this.params).then((res) => {
        if (res.code == 200) {
          this.ProductPositive = [];
          this.xAxisProduct = [];
          res.data.forEach((item) => {
            if (item.profitAmount == undefined) {
              this.ProductPositive.push(1);
            } else {
              this.ProductPositive.push(item.profitAmount);
            }
            if (this.MAXPositive < item.profitAmount) {
              this.MAXPositive = item.profitAmount;
            }

            this.xAxisProduct.push(item.foodName);
          });
          this.makeBarChartss();
        }
      });
    },
    makeBarCharts() {
      var chartDom = this.$refs.aa;
      var myChart = this.$echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: "销量TOP10菜品",
        },
        xAxis: {
          type: "category",
          data: this.xAxistProduct,
          axisLabel: {
            interval: 0,
            formatter: function (value) {
              var ret = ""; //拼接加\n返回的类目项
              var maxLength = 5; //每项显示文字个数
              var valLength = value.length; //X轴类目项的文字个数
              var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
              if (rowN > 1) {
                //如果类目项的文字大于5,
                for (var i = 0; i < rowN; i++) {
                  var temp = ""; //每次截取的字符串
                  var start = i * maxLength; //开始截取的位置
                  var end = start + maxLength; //结束截取的位置
                  //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                  temp = value.substring(start, end) + "\n";
                  ret += temp; //凭借最终的字符串
                }
                return ret;
              } else {
                return value;
              }
            },
          },
        },

        yAxis: {
          type: "value",
          axisLabel: {
            color: "#999",
          },
          max: 500,
          min: 0,
        },
        tooltip: {
          trigger: "axis", // 触发类型设置为坐标轴轴线触发
          axisPointer: {
            type: "cross", // 设置指示器类型为十字准星指示器
          },
          formatter: function (params) {
            var xValue = params[0].axisValue; // 获取 X 轴的数值
            var yValue = params[0].data; // 获取对应的 Y 轴数值
            return xValue + "  " + " 销售量：" + yValue;
          },
        },
        series: [
          {
            name: "bar",
            type: "bar",
            stack: "one",
            barWidth: 15,
            showBackground: true,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#83bff6" },
                { offset: 0.5, color: "#188df0" },
                { offset: 1, color: "#188df0" },
              ]),
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#2378f7" },
                  { offset: 0.7, color: "#2378f7" },
                  { offset: 1, color: "#83bff6" },
                ]),
              },
            },
            data: this.tProduct,
          },
        ],
      };

      myChart.setOption(option);
    },
    makeBarChartss() {
      var chartDom = this.$refs.super_tow;

      var myChart = this.$echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: "销售标准毛利总金额top10菜品",
        },
        xAxis: {
          type: "category",
          data: this.xAxisProduct,
          axisLabel: {
            interval: 0,
            formatter: function (value) {
              var ret = ""; //拼接加\n返回的类目项
              var maxLength = 5; //每项显示文字个数
              var valLength = value.length; //X轴类目项的文字个数
              var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
              if (rowN > 1) {
                //如果类目项的文字大于5,
                for (var i = 0; i < rowN; i++) {
                  var temp = ""; //每次截取的字符串
                  var start = i * maxLength; //开始截取的位置
                  var end = start + maxLength; //结束截取的位置
                  //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                  temp = value.substring(start, end) + "\n";
                  ret += temp; //凭借最终的字符串
                }
                return ret;
              } else {
                return value;
              }
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#999",
          },
          max: 999,
          min: -100,
        },
        tooltip: {
          trigger: "axis", // 触发类型设置为坐标轴轴线触发
          axisPointer: {
            type: "cross", // 设置指示器类型为十字准星指示器
          },
          formatter: function (params) {
            var xValue = params[0].axisValue; // 获取 X 轴的数值
            var yValue = params[0].data; // 获取对应的 Y 轴数值
            return xValue + "  " + " 销售标准毛利总金额：" + yValue;
          },
        },
        series: [
          {
            name: "bar",
            type: "bar",
            stack: "one",
            barWidth: 15,
            showBackground: true,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#83bff6" },
                { offset: 0.5, color: "#188df0" },
                { offset: 1, color: "#188df0" },
              ]),
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#2378f7" },
                  { offset: 0.7, color: "#2378f7" },
                  { offset: 1, color: "#83bff6" },
                ]),
              },
            },
            data: this.ProductPositive,
          },
        ],
      };

      myChart.setOption(option);
    },

    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleNodeClick(data) {
      this.params.shopId = data.id;
      this.getTop();
    },
  },
};
</script>

<style lang="scss" scoped>
.clas_All {
  margin: 20px;
}
</style>
